//页面加载后显示用户列表
$(document).ready(function(){
//准备用户信息数组
var user=[
    {"num": 1001, "name": "张三","sex":"女","password":1234,"age":"29","Date":"1991-1-1"},
    {"num": 1002, "name": "李四","sex":"男","password":1234,"age":"28","Date":"1992-2-2"},
    {"num": 1003, "name": "王五","sex":"女","password":1234,"age":"27","Date":"1993-3-3"},
    {"num": 1004, "name": "赵六","sex":"女","password":1234,"age":"26","Date":"1994-4-4"}
];
//遍历数组每个元素
for(var i = 0; i<user.length; i++){
    //构造节点
    var newTr = $(`<tr><td><input class='nike' type='checkbox'></td><td class='num'>${user[i].num}</td><td class='name'>${user[i].name}</td><td class='sex'>${user[i].sex}</td><td class='password'>${user[i].password}</td><td class='age'>${user[i].age}</td><td class='date'>${user[i].Date}</td></tr>`);
    //插入节点
    $("tbody").append(newTr);
}


});

//日期选择器
var minDate = new Date(1919,12,31);
var maxDate = new Date();
$("#newDate").datetimepicker({
minView : "month", //  日期选择器最小能选到的范围
language : "zh-CN", // 日期选择器界面语言
autoclose : true, //  true:选择时间后窗口自动关闭
format : "yyyy-mm-dd", // 文本框时间格式
startDate: minDate,
endDate: maxDate,
});


//实现提交新增用户功能
$("#summit").click(function(){

//判断是否有未填的信息
var newNum = $("#newNum").val();
var newName = $("#newName").val();
var newPassword = $("#newPassword").val();
var newDate = $("#newDate").val();
if(newNum=="" || newName=="" || newPassword=="" || newDate==""){
    alert("请将信息填写完整");
    return;
}

//通过属性选择器得到列表中的工号
var arr = new Array();//声明一个数组用于存放得到的工号
$(".num").each(function(){//遍历每个有num属性的节点，即工号
    var num = $(this).text();//得到每个工号，存入数组
    arr.push(num);
});
//判断新增的工号是否已存在
for(var i = 0; i<arr.length ;i++){
    if(newNum == arr[i]){
        console.log(arr[i])//打印校验
        alert("工号已存在，请重新输入")
        return;
    }
}

//将新增用户信息添加到列表中
//得到性别
var newSex = $("input[name='sex']:checked").val();
//得到年龄
var newYear = $("#newDate").data("datetimepicker").getDate().getFullYear();
var newAge = 2020-newYear;
//新建<tr>节点
var newTr = $(`<tr><td><input class='nike' type='checkbox'></td><td class='num'>${newNum}</td><td class='name'>${newName}</td><td class='sex'>${newSex}</td><td class='password'>${newPassword}</td><td class='age'>${newAge}</td><td class='date'>${newDate}</td></tr>`);
//添加节点
$("tbody").append(newTr);
//隐藏模态框
$("#add").modal("hide");
});

//实现删除用户信息功能
$("#delete").click(function(){
$(".nike").parent("tr").remove();
});
    